<template>
    <div v-if="!loading">
        <v-container fluid>
            <v-layout row>
                <v-flex xs12>
                    <v-carousel >
                    <v-carousel-item
                        v-for="ad in promoAds"
                        :key="ad.id"
                        :src="ad.imageSrc"
                    >
                        <!--src="https://firebasestorage.googleapis.com/v0/b/itc-adpro.appspot.com/o/ads%2F-LXcHsrHCNS94SZKQhi4..png?alt=media&token=3f86af17-4db1-4147-98d2-6147667773c1"                        -->
                        <div class="car-link">
                            <v-btn class="error" :to="'/ad/' + ad.id">{{ad.title}}</v-btn>
                        </div>
                    </v-carousel-item>
                    </v-carousel>
                </v-flex>
            </v-layout>
        </v-container>
        <v-container grid-list-lg>
            <v-layout row wrap>
                <v-flex
                    xs12
                    sm6
                    md3
                    v-for="ad of ads"
                    :key="ad.id"
                >
                    <v-card>
                        <v-img
                            :src="ad.imageSrc"
                            aspect-ratio="2.75"
                        ></v-img>
                        <v-card-title primary-title>
                            <div>
                                <h3 class="headline mb-0">{{ad.title}}</h3>
                                <div>{{ad.description}}</div>
                            </div>
                        </v-card-title>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn flat :to="'/ad/' + ad.id">Open</v-btn>
                            <app-buy-modal :ad="ad"></app-buy-modal>
                        </v-card-actions>
                    </v-card>
                </v-flex>
            </v-layout>
        </v-container>
    </div>
    <div v-else>
        <v-container>
            <v-layout row>
                <v-flex xs12 class="text-xs-center pt-5">
                    <v-progress-circular
                            indeterminate
                            color="primary"
                            :size="100"
                            :width="4"
                    ></v-progress-circular>
                </v-flex>
            </v-layout>
        </v-container>
    </div>
</template>

<script>
export default {
    computed: {
        promoAds() {
            return this.$store.getters.promoAds;
        },
        ads() {
            return this.$store.getters.ads;
        },
        loading () {
            return this.$store.getters.loading
        }
    }
}
</script>

<style scoped lang="stylus">
    .car-link
        position: absolute;
        bottom: 50px;
        left: 50%;
        background: rgba(0, 0, 0, .5);
        transform: translate(-50%, 0);
        padding: 5px 10px;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
</style>